<template>
    <el-container class="home-container">
      <el-header class="home-header">
		  <div>
			  <img src="../assets/images/logo.png" width="80" height="60"/>
			  管理系统
		  </div>
		  <div><el-button type="danger" @click="loginOut">退出</el-button></div>	  
	  </el-header>
      <el-container>
        <el-aside class="home-aside" width="200px" :width="isCollapse?'64px':'200px'">
			<div @click="isCollapse=!isCollapse" style="color: #FFF;cursor: pointer;">|||</div>
			<el-menu
			      :default-active="activePath"
				  background-color="#474747"
				  text-color="#fff"
				  active-text-color="#ffd04b"
				  :unique-opened="true"
				  :router="true"
				  :collapse="isCollapse"
				  :collapse-transition="false"
			      class="el-menu-vertical">
				  
				  	<template v-for="item in menuList">
						  <el-menu-item v-if="!item.children" :index="'/'+item.path">
							  <i :class="item.icon"></i>
							  <span>{{item.name}}</span>
						  </el-menu-item>
						  
						  <el-submenu v-else :index="'/'+item.path">
							<template slot="title">
							  <i :class="item.icon"></i>
							  <span>{{item.name}}</span>
							</template>			        
							<el-menu-item :index="'/'+item2.path" v-for="item2 in item.children"  @click="changeActive('/'+item2.path)">
								<template slot="title">						  
								  <span>{{item2.name}}</span>
								</template>
							</el-menu-item>
						  </el-submenu>
				  						  
				  						  
				  						  
				  	</template>				
			      
			</el-menu>
		</el-aside>
        <el-main class="home-main">
			<router-view></router-view>
			</el-main>
      </el-container>
    </el-container>
	
</template>
<style scoped="scoped">
.home-container{
	height: 100%;
}	
.home-header{
	background-color: #188ae2;
	display: flex;
	justify-content: space-between;
	height: 60px;
	line-height: 60px;
	font-size: 22px;
	color: #fff;
}	
.home-header img{
	vertical-align: middle;
}
.home-aside{	
	background-color: #474747;
	height: 100%;
}
.home-main{
	background-color: #eeeeee;
}
</style>
<script>


export default {
	data(){
		return {
			menuList:[],
			isCollapse:false,
			activePath:'/console/index'
		}
	},
	methods:{
		loginOut(){
			window.sessionStorage.removeItem('token');
			this.$router.replace('/');
		},
		getMenuList(){
			this.$http.get('menu').then(res => {
				if(res.data.code !== 200) return this.$message.error(res.data.msg);	
				this.menuList = res.data.data;
				console.log(res);
			});
		},
		changeActive(path){
			this.activePath = path;
		}
	},
	created(){
		this.getMenuList();
	}
}
</script>
